<template>
<div>
    <img :src="result && result.message">
    <!-- <h2>{{result}}</h2> -->
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';

export default defineComponent({
    // 下面的代码是跟随视频制作的，运行起来后提示：
    // we're sorry but firstvue doesn't work properly without JavaScript enabled.Please enable it to continue.
    // 自己猜测可能是使用了 async 和 await 导致的，下面使用返回 promise 的方式进行测试
    async setup(){
        const httpResult = await axios.get('https://dog.ceo/api/breeds/image/random');
        return {
            result: httpResult.data
        }
    }

    // setup(){
    //     return new Promise((resolve) =>{
    //         return setTimeout(() => {
    //             return resolve({ result:111 })
    //         }, 2000);
    //     })
    // }
})
</script>